<template>
  <div class="app-container">
    <el-dialog title="修改" :visible.sync="dialogconUp" center @close="close">

      {{ accuseitem }}
      <el-form :model="accuseitem" :rules="rules" ref="accuseitem" label-width="120px" class="demo-presentlist">
        <el-form-item label="商品名称" prop="cname">
          <el-input v-model="accuseitem.cname" style="width: 450px"></el-input>
        </el-form-item>
        <el-form-item label="商品积分价格" prop="money">
          <el-input v-model="accuseitem.money" style="width: 450px"></el-input>
        </el-form-item>
        <el-form-item label="商品类型">
          <el-select placeholder="请输入商品类型" v-model="accuseitem.ctype" style="width: 450px">
            <!--需要添加v-model绑定数据 v-model="formInline.acptsiteid"-->
            <el-option label="实体物品" value="0"></el-option>
            <el-option label="虚拟物品" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品数量" prop="number">
          <el-input v-model="accuseitem.number" style="width: 450px"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="cdescribe">
          <el-input type="textarea" v-model="accuseitem.cdescribe" style="width: 450px"></el-input>
        </el-form-item>
        <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false" style="margin-left: 120px">
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{file}">
            <img
                class="el-upload-list__item-thumbnail"
                :src="file.url" alt="file.url"
            >
          </div>
        </el-upload>
        <el-form-item style="margin-top: 20px">
          <el-button type="primary" @click="submitForm('presentlist')">修改</el-button>
          <el-button @click="resetForm('presentlist')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import integral from "@/api/integral";

export default {
  props: {
    dialogconUpdate: {
      type: Boolean,
      default: false
    },
    accuseitem: {
      cname: '',//商品名称
      money: '',//商品积分价格
      ctype: '',//商品类型(实体物体0,虚拟1)
      number: '',//商品数量
      cdescribe: '',//描述
      image: ''//图片
    }
  },
  data() {
    return {
      dialogconUp: false,
      dialogImageUrl: '',
      presentlist: {
        cname: '',//商品名称
        money: '',//商品积分价格
        ctype: '',//商品类型(实体物体0,虚拟1)
        number: '',//商品数量
        cdescribe: '',//描述
        image: ''//图片
      },
      rules: {
        cname: [
          {required: true, message: '请输入商品名称', trigger: 'blur'},
        ],
        money: [
          {required: true, message: '请输入商品积分价格', trigger: 'blur'},
        ],
        ctype: [
          {required: true, message: '请选择商品类型', trigger: 'change'},
        ],
        number: [
          {required: true, message: '请输入商品数量', trigger: 'blur'},
        ],
        cdescribe: [
          {required: true, message: '请输入描述', trigger: 'blur'},
        ]
      }
    };
  },
  methods: {
    close() {
      this.$emit("update:dialogconUpdate", false)
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        this.presentlist = this.accuseitem;
        console.log(this.presentlist)
        integral.findUpdateCommodity(this.presentlist)
            .then(res => {
              console.log(res)
              if (res.data == true) {
                this.$message({
                  type: 'success',
                  message: '修改成功!',
                });
              } else {
                this.$message({
                  type: 'defeated',
                  message: '修改失败!',
                });
              }
            })
            .catch(error => {
              console.log(error)
            })//请求失败
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  watch: {
    dialogconUpdate: {
      handler(newValue, oldValue) {
        this.dialogconUp = newValue;
        console.log(newValue, oldValue);
      }
    }
  }
}
</script>
